<template>
  <div class="app-container create-edit-bom">
    <el-card>
      <div slot="header" class="clearfix pointer">
        <el-link @click="$tab.closePage(view).then(({ visitedViews }) => {
        if (this.isActive(view)) {
          this.toLastView(visitedViews, view)
        }
      });$router.go(-1)" icon="el-icon-arrow-left">返回</el-link>
      </div>
      <el-container>


        <el-container>
          <el-aside width="auto!important">
            <el-tree
              :data="data"
              ref="elTree"
              :expand-on-click-node="false"
              default-expand-all
              node-key="id"
              @node-click="nodeClick">
              <div slot-scope="{ node, data }" class="flex1 flex-row">
                <div class="flex1">{{ data.parentId == 0 ? data.name : data.goodsName }}</div>
                <div style="width: 20px"></div>
                <div>
                  <el-tag size="mini" v-show="data.parentId !== 0 && data.bomQty">
                    数量：{{  data.bomQty }}
                  </el-tag>
                </div>
                <div style="width: 20px"></div>
                <el-button
                  icon="el-icon-plus"
                  size="mini"
                  type="text"
                  @click.stop="append(data)">
                  添加
                </el-button>
                <div style="width: 20px"></div>
                <el-button
                  class=""
                  icon="el-icon-delete"
                  size="mini"
                  type="text"
                  @click.stop="remove(node, data)">
                  删除
                </el-button>
              </div>
            </el-tree>
          </el-aside>
          <el-main>
            <Form :formData.sync="form" :show-obj="showObj" @onSubmit="onSubmit"></Form>
          </el-main>
        </el-container>
      </el-container>
    </el-card>
  </div>

</template>

<script>
import {delBom, getBom, queryTree} from "../../../api/basic/bom";
import Form from './components/Form'
import {deepClone} from "../../../utils";
import {handleTree} from "../../../utils/ruoyi";
import {goodsCtgListAll} from "../../../api/basic/goodsctg";

const showOrHide = (data)=>{
  let  obj = {}
  switch (data.parentId) {
    case  0: {
      obj = {
        name: true,
        code: true,
        submit: true,
        cancel: true
      }
      break
    }
    default: {
      obj = {
        goodsId: true,
        goodsName: true,
        goodsCode: true,
        goodsBatch: true,
        goodsCategory: true,
        spec: true,
        barcode: true,
        prePurchasePrice: true,
        unit: true,
        bomQty: true,
        submit: true,
        cancel: true
      }
      break
    }
  }
  return obj
}

export default {
  name: "CreateOrEditBom/:id",
  components: {
    Form
  },
  data() {

    return {
      title: "",
      data: [{
        label: "",
        id: ''
      }],
      id:'',
      form: {},
      showObj: {},
      paramsForm: {},
      tableData:[]
    }
  },
  props: {},
  created() {
      if (this.$route.params.id !== ':id') {
        this.id = this.$route.params.id
        this.getBom()
      } else {
        this.$message('没有选择项目，请重新选择')
    }

  },
  methods: {
    onSubmit() {
      this.getBom()
    },
    nodeClick(data,Node) {
      this.showObj = showOrHide(data)
      this.contentFormData( 'view', data,Node)
    },
    /** 删除按钮操作 */
    remove(node,row) {
      const ids = [ row.id ];
      this.$modal.confirm('是否确认删除'+ (row.name || row.goodsName) +'数据项？').then(function () {
        return delBom(ids);
      }).then(() => {
        this.getBom();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    append(data, Node) {
      this.contentFormData( 'add' ,data,Node)
      this.showObj = showOrHide(this.form)
    },
    getBom() {
      queryTree(this.id).then(res => {
        this.data = handleTree(res.data)
        this.paramsForm = res.data
      })
    },
    contentFormData( status, data, Node ){
      if(  status === 'add' ){
        this.form = {
          status,
          id:null,
          parentId:data.id,
          name:data.name,
          code :data.code
        }
      }else  if(  status === 'view' ){
        this.form = {
          status,
          ...data
        }
      }else {

      }
    },
  }
}
</script>

<style lang="scss">
.create-edit-bom {


  .el-container {
    height: calc(100vh - 84px - 120px);
  }

  aside {
    background: #fff;
    border-right: 3px solid #eef1f6;
  }

  el-main
  .custom-tree-node {
    .el-button [class*=el-icon-] + span {
      margin-left: 0;
    }
  }

}
</style>
